<template>
    <!-- 常规登入 -->
  <div class="common-login">
        <!-- <h1>千峰管理系统</h1> -->
        <el-form-item label="用户名" prop="username">
            <el-input type="text" v-model="loginForm.username" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="密码" prop="password">
            <el-input type="password" v-model="loginForm.password" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="验证码" prop="captcha">
            <el-input maxlength="5" class="captcha" v-model="loginForm.captcha" ref="captcha" @keydown.native.enter="submitForm('loginForm')"></el-input>
            <span class="captcha-svg" v-loading="loading">
                <i v-html="captcha" ></i>
            </span>
        </el-form-item>

        <el-form-item> 
            <el-button type="primary" @click="submitForm('loginForm')">提交</el-button>
            <!-- <el-button @click="resetForm('loginForm')">重置</el-button> -->
        </el-form-item>
        <!-- 手机登入图标按钮 -->
        <el-form-item>
            <div class="sms">
                <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-iphone"></use>
                </svg>
                <a href="javascript:;" @click="isSmsLogin = true" style="color:#fff; font-size:16px">切换短信登入</a>
            </div>
        </el-form-item>
     
    </div>
</template>
<script>
export default {
  data() {
    return{
        isSmsLogin:true,    //控制是否切换短信登入
        captcha:"", //验证码
        loading:false,
        loginForm: {
                username: '',
                password: '',
                captcha: ''
            },
      
    }
  },
  watch:{
    loginForm:{
        handler(newVal){
            console.log(newVal)
            this.$emit('syncLoginForm',newVal)
        },
        deep:true
    }
  },
  methods:{
    submitForm(formName){
        console.log(formName)
        this.$emit('submit') 
    }
  },
}
</script>
<style scoped lang="less">
    /* 修改element-ui的样式
    1.打开调试器，找准类名，覆盖样式
    2.看权重，使用！important
    3.使用深度选择器 >>>  /deep/ */
    .common-login{
        padding-right: 50px;
    }
    /deep/ .el-form-item__label {
            color: #fff;
        }
    /deep/ .el-button--primary {
            background: linear-gradient(90deg, #1596fb, #002dff);
            width: 250px;
        }
    
        .captcha-svg {
            background: #fff;
            display: inline-block;
            height: 45px;
            width: 150px;
            text-align: center;
            cursor: pointer;
            border: 0;
            border-radius: 0px 5px 5px 0;
        }
             /deep/ .captcha {
            width: 100px;
            vertical-align: top;

            .el-input__inner {
                width: 100%;
                height: 45px;
                border-radius: 5px 0 0 5px;
                border: 0;
                font-size: 18px;
            }
        }
           /deep/ .el-form-item__label {
            color: #fff;
        }
         /deep/ .el-input__inner {
            width: 250px;
        }
         /deep/ .el-button--primary {
            background: linear-gradient(90deg, #1596fb, #002dff);
            width: 250px;
        }
          /deep/ .captcha {
            width: 100px;
            vertical-align: top;
          }
</style>